<template>
    <div id="signInCalendar">
        <div class="title">每日签到</div>
        <div class="content">
            <div class="left">
                <img src="../../image/touxiang.png" alt="">
                <div class="header">顺义文化馆</div>
                <div class="registered">已注册{{registered}}天</div>
                <div class="integration">
                    <img src="../../image/jifenlogo.png" alt="" class="logo">{{integration}}积分
                </div>
            <div class="button">立即签到</div>
            </div>
            <div class="right">
                <div class="continuous">已连续签到<div style="color: #F39E2A;">{{continuousDay}}</div>天</div>
                <div class="declare">连续签到满3天，可领取30积分，连续签到满7天，可领取100积分</div>
                <div class="calendar">
                    <div class="nowTime">{{nowTime}}</div>
                    <div class="timeBox">
                        <div class="week">
                            <div>周日</div><div>周一</div><div>周二</div>
                            <div>周三</div><div>周四</div><div>周五</div><div>周六</div>
                        </div>
                        <div class="time">
                            <div :class="item == today?'current':'timeItem'" v-for="(item,index) of timeArr" :key="index">
                                <div class="back">{{item}}</div>
                                <div v-if="item == today" class="extra"><div>+10</div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            registered: "320", // 已注册天数
            integration: "180", // 积分
            continuousDay: "2", // 连续签到天数
            nowTime: "", // 现实的月份
            timeArr: [], // 日期的循环
            today:"", // 当前日期
            month:"", //当前月份
        };
	},
    mounted(){
        this.getTime() // 调用渲染日历的接口
    },
	methods: {
        // 获取当前月的第一天
        getCurrentMonthFirst(date){
            var date = new Date(date);
            date.setDate(1);
            var month = parseInt(date.getMonth()+1); 
            var day = date.getDate();
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return date.getFullYear() + '-' + month + '-' + day;
        },
        // 获取当前月的最后一天
        getCurrentMonthLast(date){
            var date = new Date(date);
            var currentMonth=date.getMonth();
            var nextMonth=++currentMonth;
            var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
            var oneDay=1000*60*60*24;
            var lastTime = new Date(nextMonthFirstDay-oneDay);
            var month = parseInt(lastTime.getMonth()+1);
            var day = lastTime.getDate();
            if (month < 10) {
            month = '0' + month
            }
            if (day < 10) {
            day = '0' + day
            }
            console.log(date.getFullYear() + '-' + month + '-' + day)
            return date.getFullYear() + '-' + month + '-' + day;
        },
        // 获取当前月的天数
        mGetDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var d = new Date(year, month, 0);
            return d.getDate();
        },
        getTime(){
            let time = new Date()
            time.setMonth(time.getMonth());
            var dateString = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
            var year = time.getFullYear()
            var month = time.getMonth() + 1
            this.nowTime = time.getFullYear() + "年" + (time.getMonth() + 1)+'月'
            this.year = year
            this.month = month
            // this.nowMoth = month
            let start = new Date(this.getCurrentMonthFirst(dateString)).getTime()
            let arr = []
            for(var i =0; i< this.mGetDate(start);i++){
                arr.push(i+1)
            }
            let a = 0
            var myDate = new Date(start);
            a = myDate.getDay()
            for(let i = 0;i<a;i++){
                arr.unshift(' ')
            }
            var Today=new Date();
            let todays = Today.getDate();
            this.timeArr = arr,
            this.today = todays
            // console.log(this.today)
        },
    },
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){    
    #signInCalendar{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        .content{
            margin-top: 3%;
            display: flex;
            .left{
                flex: 1;
                text-align: center;
                border-right: 1px solid #ccc;
                img{
                    width: 30%;
                    margin-top: 20%;
                }
                .header{
                    font-size: 24px;
                    margin: 12% 0% 2% 0%;
                }
                .registered{
                    color: #ccc;
                }
                .integration{
                    color: #F29418;
                    .logo{
                        width: 5%;
                        margin-top: 5%;
                    }
                }
                .button{
                    width: 40%;
                    margin: 10% 0% 40% 30%;
                    text-align: center;
                    border-radius: 5px;
                    padding: 2% 0%;
                    font-size: 18px;
                    color: white;
                    background: #F39E2A;
                }
            }
            .right{
                flex: 2;
                margin-left: 5%;
                .continuous{
                    font-size: 22px;
                    font-weight: 500;
                    display: flex;
                }
                .declare{
                    line-height: 30px;
                    font-size: 14px;
                    color: #ccc;
                    margin-bottom: 5%;
                }
                .calendar{
                    font-size: 20px;
                    .nowTime{
                        font-size: 26px;
                        line-height: 50px;
                        text-align: center;
                        border-bottom: 1px solid #ccc;
                    }
                    .timeBox{
                        width: 100%;
                        .week{
                            text-align: center;
                            line-height: 40px;
                            display: flex;
                            div{
                                flex: 1;
                            }
                        }
                        .time{
                            text-align: center;
                            word-wrap: break-word;
                            .timeItem{
                                float: left;
                                width: 14%;
                                height: 60px;
                            }
                            .current{
                                float: left;
                                width: 15%;
                                height: 60px;
                                color: white;
                                border-radius: 50px;
                                .back{
                                    height: 60%;
                                    background: url("../../image/qiandaologo.png") no-repeat center top;
                                    background-size: 40%;
                                }
                                .extra{
                                    // width: 100%;
                                    margin-top: 5%;
                                    margin-left: 23%;
                                    div{ 
                                        width: 70%;
                                        line-height: 15px;
                                        font-size: 14px;
                                        border-radius: 50px;
                                        background: #F29418;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}



@media screen and (max-width: 1400px){    
    #signInCalendar{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        .content{
            margin-top: 2%;
            display: flex;
            .left{
                flex: 1;
                text-align: center;
                border-right: 1px solid #ccc;
                img{
                    width: 28%;
                    margin-top: 18%;
                }
                .header{
                    font-size: 20px;
                    margin: 10% 0% 1.5% 0%;
                }
                .registered{
                    color: #ccc;
                }
                .integration{
                    color: #F29418;
                    .logo{
                        width: 5%;
                        margin-top: 3%;
                    }
                }
                .button{
                    width: 40%;
                    margin: 10% 0% 0% 30%;
                    text-align: center;
                    border-radius: 5px;
                    padding: 2% 0%;
                    font-size: 16px;
                    color: white;
                    background: #F39E2A;
                }
            }
            .right{
                flex: 2;
                margin-left: 5%;
                .continuous{
                    font-size: 20px;
                    font-weight: 500;
                    display: flex;
                }
                .declare{
                    line-height: 30px;
                    font-size: 12px;
                    color: #ccc;
                    margin-bottom: 3%;
                }
                .calendar{
                    font-size: 18px;
                    .nowTime{
                        font-size: 24px;
                        line-height: 40px;
                        text-align: center;
                        border-bottom: 1px solid #ccc;
                    }
                    .timeBox{
                        width: 100%;
                        .week{
                            text-align: center;
                            line-height: 36px;
                            display: flex;
                            div{
                                flex: 1;
                            }
                        }
                        .time{
                            text-align: center;
                            word-wrap: break-word;
                            .timeItem{
                                float: left;
                                width: 14%;
                                height: 50px;
                            }
                            .current{
                                float: left;
                                width: 15%;
                                height: 50px;
                                color: white;
                                border-radius: 50px;
                                .back{
                                    height: 60%;
                                    background: url("../../image/qiandaologo.png") no-repeat center top;
                                    background-size: 36%;
                                }
                                .extra{
                                    // width: 100%;
                                    margin-top: 3%;
                                    margin-left: 23%;
                                    div{ 
                                        width: 70%;
                                        line-height: 15px;
                                        font-size: 12px;
                                        border-radius: 50px;
                                        background: #F29418;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>